<template>
   <div>
       <div class="bigdiv" v-for="cou in coupons" style="margin-top: 30px;margin-left: 20px;margin-right: 20px ;height: 50px; background-color: rgb(255, 242, 230);border-radius:10px;color:rgb(255, 128, 0);padding-top: 25px" >
 <!--       <p style="margin-bottom: 15px; font-size: 5px;margin-left: 5px;width: 150px">店铺优惠卷</p>-->
          <div class="headdiv" style="font-size: 20px;width: 70%;float: left ;border-right: 1px dashed rgb(255, 128, 0) ">
              <div>
                  <div style="width: 30%;float: left">
                     <span style="font-size: 30px"><span style="font-size: 15px;text-align:center">￥</span>{{cou.couponMoney}}</span>
                  </div>
                  <div style="width: 70%;float: left;font-size: 15px">
                      <span>满{{cou.couponQuota}}使用</span><br>
                      <span style="font-size: 10px" v-show="cou.stopVaildTime != null">有效期至{{cou.stopVaildTime}}</span>
                      <span style="font-size: 10px" v-show="cou.days != null">有效期{{cou.days}}天</span>
                  </div>
              </div>
          </div>
         <!--  <span style="border-left: 1px dashed rgb(255, 128, 0);height: 120px"></span>-->
          <div class="bodydiv" style="float: right;height: 45px;padding-top:-10px;width: 27%;font-size: 20px ;border-top-right-radius: 10px ">
              <span @click="pullDown(cou.couponId,cou.eachLimitGet,cou.remainder)">立即领取</span>
          </div>
       </div>
       <van-button type="danger" style="position:fixed; bottom:0; width: 80%; margin: 0px 10% 10% 10%;border-radius:10px" @click="getClose" >关闭</van-button>
   </div>
</template>
<script>

    export default {
        name: 'Coupon',
        props:["coupons","showList"],

        data() {
            return {
                count: '',
                userCouponCount: '',
                couId: '',
                userId: ''
            }
        },
        created() {

        },
        methods: {

             pullDown(val,eachimit,remainder){
                 if(this.userId == null){ //用户登录
                    if(val != this.couId || this.couId == null){
                        this.$axios.get("http://localhost:8301/userCoupon/getUserCouponCount?couponId="+val+"&userId="+1).then( res => {
                            this.count= res.data;
                            this.couId = val;
                           this.pullDown2(val,eachimit,remainder);
                        })
                     }else {
                        if(val == this.couId){
                            this.pullDown2(val,eachimit,remainder);
                        }
                    }
                 }else{
                     alert("还未登录,不能领取，请先登录^_^")
                 }
                },
            pullDown2(val,eachimit,remainder){
                    if((this.count<eachimit || eachimit == 0) && this.count<=remainder){
                        this.$axios.post("http://localhost:8301/userCoupon/addUserCoupon",{
                            couponId: val,
                            userId: 1
                        }).then( res => {
                            this.count++
                            //  this.$message.success("领取成功")
                            alert("领取成功")
                        })
                    }else {
                        if(this.count<eachimit){
                            alert("没有卷了,抱歉^_^")
                            // this.$message.success("没有卷了,抱歉^_^")
                        }else {
                            alert("一人只允许领"+this.count+"次")
                            //  this.$message.success("一人只允许领"+this.count+"次")
                        }

                    }

            },
                getClose () {

                    this.$emit("show",false)
                }

            },
    }
</script>
